<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax案例</title>

</head>

<script type="text/javascript">

    function sendRequest()
    {
        //1. 类库 创建对象
        var xhttp = new XMLHttpRequest();
        //2. 发送请求
        //2.1 打开网址 请求方式 URL
        xhttp.open("GET","/ajax-demo/AjaxServlet?userName =");
        //2.2 发送请求
        var data = {} //post js 对象 get
        xhttp.send()
        //3. 响应 状态
        xhttp.onreadystatechange =  function ()
        {

            //3.1 判断响应状态码 200
            if(this.status==200 && this.readyState == 4)
            {
                //3.2 获取响应的数据
               // alert(this.responseText);
                //3.3 重新构建HTML
                document.getElementById("username").innerHTML =this.responseText ;

            }

        }

    }

   //2.jQuery 调用Ajax $

    //3.axios

</script>

<body>
<h1 id="username">用户名</h1>
<a href="/ajax-demo/AjaxServlet">超链链接访问AjaxServlet</a> <br>

<input type="button" value="Ajax发送请求" onclick="sendRequest()">

</body>
</html>